<template>
	<el-container class="home__container">
		<!-- 侧栏 -->
		<el-aside width="200px">
			<h1 class="title" style="height:60px"></h1>
			<el-menu :default-active="$route.path"
				class="el-menu-vertical-demo"
				text-color="#4e5bf8"
				ref="sideMenu"
				active-text-color="#E47833"
				:collapse="false">
				<!-- //我们的组件 -->
				<qf-sub-menu :sideMenu='$store.state.sideMenu'></qf-sub-menu>
			</el-menu>
		</el-aside>
		<el-container>
			<!-- 顶部区域 -->
			<el-header>
				<el-row type="flex"
					class="row-bg"
					justify="space-between">
					<el-col :span="6">
						<div class="breadMenu">
							🍞按钮
						</div>
					</el-col>
					<el-col :span="6">
						<div class="title">
							<h1>crm系统</h1>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="userInfo">
							欢迎登入:卢本伟
						</div>
					</el-col>
				</el-row>
			</el-header>
			<!-- 主体区域 -->
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<style lang="less" scoped>
.el-header,
.el-footer {
	background-image: linear-gradient(135deg, #4c67ff, #5635df);
	color: #fff;
	text-align: center;
	line-height: 60px;
}

.el-aside {
	background-color: #d3dce6;
	color: #333;
	text-align: center;
	line-height: 200px;
}

.el-main {
	background-color: #e9eef3;
	color: #333;
	text-align: center;
	line-height: 160px;
}

html,
body,
#app,
.el-container {
	height: 100%;
}

body > .el-container {
	margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
	line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}

.el-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.el-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}
</style>